<template>
  <div class="flex-c flex-align">
    <el-button type="primary" @click="goRouter('/news')">go news</el-button>
    <el-button type="primary" @click="goRouter('/user')">go user</el-button>
    <el-button type="primary" @click="getUserInfo">get user info</el-button>

    <!-- <z-button type="blue" text="测试blue" :left="10"></z-button>
    <z-button type="warn" text="测试warn" :left="10"></z-button> -->

    <z-table :propList="propList" :data="tableData" :operation="false"></z-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import useUserStore from '@/store/modules/user'

// import ZButton from '@/components/button/index'
import ZTable from '@/components/table/index'
import { ZTableOptions } from '@/components/table/types'


const userStore = useUserStore()

const router = useRouter()

const goRouter = (path: string): void => {
  router.push(path)
}

const getUserInfo = () => {
  console.dir(userStore.userInfo)
}

const tableData: any = ref([
  {
    fileName: '测试文件01',
    fileType: 'pdf',
    submitterName: '张三',
    submitTime: '2024-01-04 09:34:18'
  },
  {
    fileName: '测试文件02',
    fileType: 'png',
    submitterName: '李四',
    submitTime: '2024-01-04 11:26:57'
  }
])

const propList: ZTableOptions[] = [
  {
    showOverflowTooltip: true,
    label: '文件名称',
    prop: 'fileName',
    minWidth: 130,
    align: 'left'
  },
  {
    showOverflowTooltip: true,
    label: '文件类型',
    prop: 'fileType',
    minWidth: 130,
    align: 'left'
  },
  {
    label: '上传人',
    prop: 'submitterName',
    minWidth: 150,
    showOverflowTooltip: true
  },
  {
    label: '上传时间',
    prop: 'submitTime',
    minWidth: 160
  }
]

</script>
